<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据操作 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
    <script src="../../../layuiadmin/json/table/user.js"></script>
    <script src="../../js/jquery-1.4.1.js"></script>


</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>数据操作</cite></a>
    </div>
</div>


<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
<!--                    <form class="layui-form" action="http://localhost:8080/bill/list-page"  lay-filter="component-form-group">-->
                    <div class="layui-card-body" pad15>
                        <div class="layui-form" wid100>
                            <div class="layui-form-item">
                                <br>

                                <div class="layui-inline">
                                    <label class="layui-form-label">开始时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="date1" name="date1" placeholder="yyyy-MM-dd">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label">结束时间</label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" id="date2" name="date2" placeholder="yyyy-MM-dd">
                                    </div>
                                </div>
                                <div class="layui-inline" id="search">
                                    <select name="typeId" id="typeId" lay-verify="required" lay-search>
                                        <option value="">可以通过类别查找</option>
                                        <option value=""></option>
                                        <option value="1">收入</option>
                                        <option value="2" >支出</option>
                                        <option value="3">借入</option>
                                        <option value="4">借出</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div style="text-align:center">
                            <button id="reloadBtn" class="layui-btn" data-type="reload" >搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>

                    </div>
<!--                    </form>-->
                        <table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>

                        <script type="text/html" id="test-table-operate-barDemo">
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" >删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <!--</div>-->
    </div>
</div>

    <script src="../../../layuiadmin/layui/layui.js"></script>


<!--<script>-->

<!--    page();-->
<!--    /* 监听提交 */-->
<!--    form.on('submit(formDemo)', function(data){-->
<!--        var type=document.getElementById("typeId");-->
<!--        var Id = type.value;-->
<!--        console.log(typeId);-->
<!--        page(Id,null,null)-->

<!--        return false;-->
<!--    });-->

<!--</script>-->

<!--<script>-->
<!--    // var type=document.getElementById("typeId");-->
<!--    // var Id = type.value;-->
<!--    // console.log(typeId);-->
<!--    page(null,null,null);-->

<!--    layui.config({-->
<!--        base: '../../layuiadmin/' //静态资源所在路径-->
<!--    }).extend({-->
<!--        index: 'lib/index' //主入口模块-->
<!--    }).use(['index', 'form', 'laydate'], function(){-->
<!--        var $ = layui.$-->
<!--            ,admin = layui.admin-->
<!--            ,element = layui.element-->
<!--            ,layer = layui.layer-->
<!--            ,laydate = layui.laydate-->
<!--            ,form = layui.form;-->

<!--        form.render(null, 'component-form-group');-->

<!--        laydate.render({-->
<!--            elem: '#LAY-component-form-group-date'-->
<!--        });-->

<!--        laydate.render({-->
<!--            elem: '#date1'-->
<!--        });-->
<!--        laydate.render({-->
<!--            elem: '#date2'-->
<!--        });-->

<!--    });-->

<!--    /* 监听提交 */-->
<!--    form.on('submit(formDemo)', function(){-->

<!--        /* 监听提交 */-->
<!--        form.on('submit(formDemo)', function(){-->
<!--            var type=document.getElementById("typeId");-->
<!--            var Id = type.value;-->
<!--            console.log(typeId);-->
<!--            page(Id,null,null)-->

<!--            return false;-->
<!--        });-->
<!--    });-->
<!--</script>-->

    <script>

        layui.config({
            base: '../../../layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table','laydate'], function () {
            // var type=document.getElementById("typeId");
            // var Id = type.value;
            var table = layui.table
                , admin = layui.admin;
            table.render({
                elem: '#test-table-operate'
                , url: 'http://localhost:10010/bill/list-page'
                , width: admin.screen() > 1 ? 892 : ''
                , height: 332
                , id: 'test-operate'
                , cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'}
                    , {field: 'title', width: 80, title: '标题'}
                    , {field: 'billTime', width: 80, title: '时间'}
                    , {field: 'price', width: 80, title: '金额'}
                    , {field: 'typeId', width: 80, title: '类别'}
                    , {field: 'explain', width: 200, title: '说明'}
                    , {width: 178, align: 'center', fixed: 'right',title: '操作', toolbar: '#test-table-operate-barDemo'}
                ]],

                parseData:function(res){
                    console.log(res)
                    var data = res.data;
                    for(index in data){
                        var birthday= data[index].billTime;
                        var time = new Date(birthday);
                        data[index].billTime= time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();
                    }
                }

                , page: true
            });

            //监听表格复选框选择
            table.on('checkbox(test-table-operate)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(test-table-operate)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除此条账单吗', function (index) {
                        console.log(data.id);
                        var id=data.id;
                        $.ajax({
                            url:"http://localhost:10010/bill/delete?id="+id,
                            async: false,
                            type:"GET",
                            dataType: "json",
                            // jsonp:"callback",
                            // jsonpCallback:"success_jsonp",
                            success: function(data){

                            }
                        })
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    // layer.alert('编辑行：<br>' + JSON.stringify(data));
                    var storage = window.localStorage;
                    console.log(storage)
                    var setData = JSON.stringify(data);
                    storage.setItem('update',setData);
                    location.href='/spring-cloud-project/bill-web/src/views/home/update.html';
                }
                console.log(1111);

            });

            var $ = layui.$, active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('test-table-operate')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                },
                isAll: function () { //验证是否全选
                    var checkStatus = table.checkStatus('test-table-operate');
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                }
            };

            $('.test-table-operate-btn .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            var laydate = layui.laydate;

            //示例代码
            //常规用法
            laydate.render({
                elem: '#date1'
            });
            laydate.render({
                elem: '#date2'
            });

            $("#reloadBtn").click(function (ev) {
                console.info("reload");
                var date1 = $("#date1").val();
                var date2 = $("#date2").val();
                var typeId = $("#typeId").val();
                table.reload('test-operate', {
                    url: 'http://localhost:10010/bill/list-page'
                    , where: {
                        date1: date1,
                        date2: date2,
                        typeId:typeId
                    } //设定异步数据接口的额外参数

                });

            })
        });


    </script>

<!--<script>-->
<!--    var type=document.getElementById("typeId");-->
<!--    var Id = type.value;-->
<!--    console.log(typeId);-->
<!--    layui.config({-->
<!--        base: '../../../layuiadmin/' //静态资源所在路径-->
<!--    }).extend({-->
<!--        index: 'lib/index' //主入口模块-->
<!--    }).use(['index', 'table','laydate'], function () {-->
<!--        var table = layui.table-->
<!--            , admin = layui.admin;-->
<!--        table.render({-->
<!--            elem: '#test-table-operate'-->
<!--            , url: 'http://localhost:8080/bill/list-page?typeId='+Id-->
<!--            , width: admin.screen() > 1 ? 892 : ''-->
<!--            , height: 332-->
<!--            , cols: [[-->
<!--                {type: 'checkbox', fixed: 'left'}-->
<!--                , {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'}-->
<!--                , {field: 'title', width: 80, title: '标题'}-->
<!--                , {field: 'billTime', width: 80, title: '时间'}-->
<!--                , {field: 'price', width: 80, title: '金额'}-->
<!--                , {field: 'typeId', width: 80, title: '类别'}-->
<!--                , {field: 'explain', width: 200, title: '说明'}-->
<!--                , {width: 178, align: 'center', fixed: 'right',title: '操作', toolbar: '#test-table-operate-barDemo'}-->
<!--            ]],-->
<!--            parseData:function(res){-->
<!--                console.log(res)-->
<!--                var data = res.data;-->
<!--                for(index in data){-->
<!--                    var birthday= data[index].billTime;-->
<!--                    var time = new Date(birthday);-->
<!--                    data[index].billTime= time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate();-->
<!--                }-->
<!--            }-->
<!--            , page: true-->
<!--        });-->

<!--        //监听表格复选框选择-->
<!--        table.on('checkbox(test-table-operate)', function (obj) {-->
<!--            console.log(obj)-->
<!--        });-->
<!--        //监听工具条-->
<!--        table.on('tool(test-table-operate)', function (obj) {-->
<!--            var data = obj.data;-->
<!--            if (obj.event === 'detail') {-->
<!--                layer.msg('ID：' + data.id + ' 的查看操作');-->
<!--            } else if (obj.event === 'del') {-->
<!--                layer.confirm('确定删除此条账单吗', function (index) {-->
<!--                    console.log(data.id);-->
<!--                    var id=data.id;-->
<!--                    $.ajax({-->
<!--                        url:"http://localhost:8080/bill/delete?id="+id,-->
<!--                        async: false,-->
<!--                        type:"GET",-->
<!--                        dataType: "json",-->
<!--                        // jsonp:"callback",-->
<!--                        // jsonpCallback:"success_jsonp",-->
<!--                        success: function(data){-->

<!--                        }-->
<!--                    })-->
<!--                    obj.del();-->
<!--                    layer.close(index);-->
<!--                });-->
<!--            } else if (obj.event === 'edit') {-->
<!--                // layer.alert('编辑行：<br>' + JSON.stringify(data));-->
<!--                var storage = window.localStorage;-->
<!--                console.log(storage)-->
<!--                var setData = JSON.stringify(data);-->
<!--                storage.setItem('update',setData);-->
<!--                location.href='/bill_web/views/home/update.html';-->
<!--            }-->
<!--            console.log(1111);-->

<!--        });-->

<!--        var $ = layui.$, active = {-->
<!--            getCheckData: function () { //获取选中数据-->
<!--                var checkStatus = table.checkStatus('test-table-operate')-->
<!--                    , data = checkStatus.data;-->
<!--                layer.alert(JSON.stringify(data));-->
<!--            },-->
<!--            isAll: function () { //验证是否全选-->
<!--                var checkStatus = table.checkStatus('test-table-operate');-->
<!--                layer.msg(checkStatus.isAll ? '全选' : '未全选')-->
<!--            }-->
<!--        };-->

<!--        $('.test-table-operate-btn .layui-btn').on('click', function () {-->
<!--            var type = $(this).data('type');-->
<!--            active[type] ? active[type].call(this) : '';-->
<!--        });-->
<!--        var laydate = layui.laydate;-->

<!--        //示例代码-->
<!--        //常规用法-->
<!--        laydate.render({-->
<!--            elem: '#date1'-->
<!--        });-->
<!--        laydate.render({-->
<!--            elem: '#date2'-->
<!--        });-->
<!--    });-->
<!--</script>-->


</body>
</html>